<template>
    <div>
        <Header :left="true" leftText="返回" title="车辆出发确认" />
        <div>
            <van-tabs v-model="active" type="card" :offset-top="80" :sticky="true" @click="tabChange" swipeable
                style="top: 8px; font-size: 15px" color="#1c6c8d">
                <!-- 未确认页面 -->
                <van-tab title="未确认" style="font-size: 15px">
                    <van-row style="margin-top: 20px">
                        <van-col>
                            <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
                        </van-col>
                        <van-col class="message">未确认记录</van-col>
                    </van-row>
                    <div class="textScroll">
                        <!-- 循环数据开始 -->
                        <div v-for="item in itemsOne" :key="item.id">
                            <div style="width: 100%; background-color: #f3f4f8; height: 5px">
                                <span></span>
                            </div>
                            <div class="divStyle">
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="18" style="color: #a9a9a9">发货日期:{{ item.deliverydatetime }}</van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="18" style="color: #a9a9a9">客户名称:{{ item.customername }}</van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="18" style="color: #a9a9a9">产品名称:{{ item.productionname }}</van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="18" style="color: #a9a9a9">发货顺序:{{ item.deliveryindex }}</van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="18" style="color: #a9a9a9">计划最晚发车时间: {{ item.planbegindatetime }}</van-col>
                                </van-row>
                                                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="6"> </van-col>
                  <van-col span="3"> </van-col>
                  <van-col span="6"> </van-col>
                  <!-- <van-col span="6">
                    <van-popover
                      v-model="showPopover"
                      trigger="click"
                      :actions="actions"
                      @select="onSelect"
                    >
                      <template #reference>
                        <van-button
                          type="warning"
                          style="
                            width: 85px;
                            height: 40px;
                            margin-bottom: 10px;
                            right: 5px;
                            font-size: 12px;
                          "
                          >延迟处理</van-button
                        >
                      </template>
                    </van-popover>
                  </van-col> -->

                  <van-col span="6">
                    <van-button
                      @click.stop="confirmmessage(item.id)"
                      style="
                        width: 85px;
                        height: 40px;
                        margin-bottom: 10px;
                        margin-left: 20px;
                        right: 5px;
                        font-size: 12px;
                      "
                      color="#138087"
                      type="info"
                      text="操作处理"
                    />
                  </van-col>
                </van-row>
                            </div>
                        </div>
                        <!-- 循环数据结束 -->
                    </div>
                </van-tab>
                <!-- 已确认页面 -->
                <van-tab title="已确认">
                    <van-row style="margin-top: 20px">
                        <van-col>
                            <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
                        </van-col>
                        <van-col class="message">已确认信息</van-col>
                    </van-row>
                    <div class="textScroll2">
                        <!-- 循环数据开始 -->
                        <div v-for="item2 in itemsTwo" :key="item2.id">
                            <div style="width: 100%; background-color: #f3f4f8; height: 5px">
                                <span></span>
                            </div>
                            <div class="divStyle">
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="18" style="color: #a9a9a9">发货日期:{{ item2.deliverydatetime }}</van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="18" style="color: #a9a9a9">客户名称:{{ item2.customername }}
                                    </van-col>
                                </van-row>
                                <van-row style="
                    margin-left: 10px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    ">
                                    <van-col span="18" style="color: #a9a9a9">产品名称: {{ item2.productionname }}</van-col>
                                </van-row>
                                <van-row style="
                    margin-left: 10px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    ">
                                    <van-col span="18" style="color: #a9a9a9">发货顺序: {{ item2.deliveryindex }}</van-col>
                                </van-row>
                                <van-row style="
                    margin-left: 10px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    ">
                                    <van-col span="18" style="color: #a9a9a9">计划最晚发车时间: {{ item2.planbegindatetime }}</van-col>
                                </van-row>
                                <van-row style="
                    margin-left: 10px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    ">
                                    <van-col span="18" style="color: #a9a9a9">确认人: {{ item2.collectionoperator }}</van-col>
                                </van-row>
                                <van-row style="
                    margin-left: 10px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    ">
                                    <van-col span="18" style="color: #a9a9a9">确认时间: {{ item2.factcollectiondatetime }}</van-col>
                                </van-row>
                            </div>
                        </div>

                        <!-- 循环数据结束 -->
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>
<script>
import {
    Icon,
    Button,
    CellGroup,
    Cell,
    Field,
    tab,
    tabs,
    Col,
    Row,
    Image as VanImage,
    Divider,
    Checkbox,
    Pagination,
    Panel,
    Toast,
    Dialog,
    List,
} from "vant";
import { _httpClient } from "@/libs/api";
import { storage } from "@/libs/utils";
import {
    removeToken,
    getToken,
    setBaseApiFrefix,
    getBaseApiFrefix,
} from "@/libs/auth";
import { memory } from "@/libs/utils";
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(tab);
Vue.use(tabs);
Vue.use(Button);
Vue.use(Col);
Vue.use(Row);
Vue.use(Icon);
Vue.use(VanImage);
Vue.use(Divider);
Vue.use(Checkbox);
Vue.use(Pagination);
Vue.use(Panel);
Vue.use(Dialog);
Vue.use(List);
import Header from "@/components/header.vue";
import apicloud from "@/libs/apicloud";
export default {
    name: "vehiclearrivesconfirm",
    components: {
        Button,
        Header,
        Icon,
        CellGroup,
        Cell,
        Field,
        tab,
        tabs,
        Col,
        Row,
    },

    data() {
        return {
            //动态加载数据
            loading: false,
            finished: false,
            allSelected: false,
            screenWidth: 0,
            checked: true,
            active: 2,
            currentPage: 1,
            user: [], //登录用户信息

            //下拉刷新动态
            loadParams: {
                pageNum: 1,
                pageSize: 5,
                total: 0,
            },
            itemsOne: [],
            itemsTwo: [], //已确认明细
        };
    },
    created: function () {
        let oldHight = api.winWidth;
        this.screenWidth = oldHight;
        //获取当前系统登录用户
        this.user = JSON.parse(storage.get("user"));
       // alert(JSON.stringify(this.user));

        let tkn = getToken();
        if (!tkn) {
            api.openWin({
                name: "login",
                url: "./login-login.html",
                rect: {
                    x: 0,
                    y: 150,
                    w: api.winWidth,
                    h: api.winHeight,
                },
            });
        }

        this.queryWaitAssignList();
    },
    methods: {
        //已指派数据动态加载
        onLoad() {
            //页数+1
            this.loadParams.pageNum = this.loadParams.pageNum + 1;
            // 异步更新数据
            // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            setTimeout(() => {
                //this.queryCheckedAssignList();
                // 加载状态结束
                this.loading = false;

                this.finished = true;
            }, 1000);
        },
        //查询已确认集货完成数据
        async queryCheckedAssignList() {
            let _this = this;
            Toast.loading({
                mask: true,
                forbidClick: true,
                duration: 0,
                message: "Loading...",
            });
            try {
                let res = await _httpClient.post(
                    _httpClient.getApiPrefix() + "/app/logistics/ProductionDeliveryPlan/listvehiclearrivesconfirm",
                    {
                        body: {
                            factoryid: _this.user.site
                        },
                    }
                );

                if (res.code === 200) {
                    Toast.clear();
                    _this.itemsTwo = res.rows;
                } else {
                    Toast.fail(res.msg);
                }
            } catch (e) {
                //alert(JSON.stringify(e));
                Toast.fail(JSON.stringify(e));
            }
        },
        //tab切换
        tabChange(name, title) {
            if (name == 0) {
                //查询未确认信息
                this.queryWaitAssignList();
            } else if (name == 1) {
                //查询已确认信息
                this.queryCheckedAssignList();
            }
        },
        //确认
        async confirmmessage(id) {
                  api.openWin({
        name: "logistics-vehiclearrivesconfirmitem",
        url: "./logistics-vehiclearrivesconfirmitem.html",
        pageParam: {
          id: id
        },
         reload:true
      });
            // Toast.loading({
            //     mask: true,
            //     forbidClick: true,
            //     duration: 0,
            //     message: "确认中...",
            // });
            // let _this = this;
            // try {
            //     let res = await _httpClient.post(
            //         _httpClient.getApiPrefix() + "/app/logistics/ProductionDeliveryPlan/surevehiclearrivesconfirm",
            //         {
            //             body: {
            //                 id: id,
            //                 beginoperator: _this.user.userId,
            //             },
            //         }
            //     );
            //     if (res.code === 200) {
            //         Toast.clear();
            //         Toast.success("确认成功");
            //         this.queryWaitAssignList();
            //     } else {
            //         Toast.success(res.msg);
            //     }
            // } catch (e) {
            //     alert(JSON.stringify(e));
            // }
        },
        //详情展示
        showDetail(id) {
            api.openWin({
                name: "manhourfact-confirmemployeedetail",
                url: "./manhourfact-confirmemployeedetail.html",
                pageParam: {
                    id: id,
                },
            });
        },
        //查询未确认集货完成数据
        async queryWaitAssignList() {
            let _this = this;
            Toast.loading({
                mask: true,
                forbidClick: true,
                duration: 0,
                message: "Loading...",
            });
            try {
                let res = await _httpClient.post(
                    _httpClient.getApiPrefix() + "/app/logistics/ProductionDeliveryPlan/listvehiclearrivesconfirmnook",
                    {
                        body: {
                            factoryid: _this.user.site
                        },
                    }
                );

                if (res.code === 200) {
                    Toast.clear();

                    _this.itemsOne = res.rows;
                } else {
                    Toast.fail(res.msg);
                }
            } catch (e) {
                alert(JSON.stringify(e));
                Toast.fail(JSON.stringify(e));
            }
        },
    },
};
</script>
<style>
body {
    background-color: White;
}

.pic {
    width: 100%;
    text-align: center;
}

.divMedia {
    margin-top: 10px;
    height: 190px;
    border: solid #dcdcdc;
    margin-left: 5px;
    margin-right: 15px;
    border-top-width: 4px;
    border-left-width: 4px;
    border-right-width: 1px;
}

.clickbtn {
    width: 1;
    margin: 5px 10px;
    line-height: 45px;
    border: 1px #ccc dashed;
    text-align: center;
}

.buttonRight {
    position: fixed;
    margin-top: -40px;
    right: 15px;
    width: 90px;
    height: 40px;
    background-color: #1c6c8d;
    border-color: #1c6c8d;
}

.buttonLeft {
    position: fixed;
    margin-top: -40px;
    right: 110px;
    width: 90px;
    height: 40px;
    background-color: #1c6c8d;
    border-color: #1c6c8d;
}

.message {
    font-size: 20px;
    margin-top: 0px;
    margin-left: -10px;
    font-weight: bold;
}

.divStyle {
    /* border: 1px solid #dcdcdc; */
    border-top-width: 3px;
    border-left-width: 3px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 0px;
}

.pagination {
    position: fixed;
    bottom: 15px;
    width: 100%;
    color: rgb(0, 0, 255);
    text-align: center;
}

.textScroll {
    display: inline-block;
    position: fixed;
    top: 10.2rem;
    bottom: 1px;
    overflow: scroll;
    right: 0;
    width: 100%;
    margin-bottom: 0.5rem;
    z-index: 1;
}

.textScroll2 {
    display: inline-block;
    position: fixed;
    top: 10rem;
    left: 0;
    bottom: 1px;
    overflow-y: scroll;
    width: 100%;
    margin-bottom: 0.5rem;
    z-index: 1;
    overflow-x: hidden;
    /*解决ios上滑动不流畅*/
    -webkit-overflow-scrolling: touch;
}
</style>
